<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>产品信息</title>
		<!--引入layui的css  -->
		<link rel="stylesheet" href="./layui/css/layui.css" media="all">
	</head>
	<!--引入layui的js  -->
	<script src="./layui/layui.js" charset="utf-8"></script>
	<!--引入jquery的js  -->
	<script src="./js/jquery-2.1.1.min.js" charset="utf-8"></script>
	
	<body>
	<!-- 查询条件输入框 -->
	<div class="layui-form-item" style="margin-top: 10px;">
		<form class="layui-form" onsubmit="return false;">
			<label class="layui-form-mid">姓名:</label>
			<div class="layui-input-inline" style="width: 120px;">
				<input type="text" id="username" name="username" autocomplete="off" class="layui-input">
			</div>
			<label class="layui-form-mid">性别:</label>
			<div class="layui-input-inline" style="width: 200px;">
				<select id="sex" name="sex">
					<option value="">请选择</option>
					<option value="男">男</option>
					<option value="女">女</option>
				</select>
			</div>
			<label class="layui-form-mid">是否是管理员:</label>
			<div class="layui-input-inline" style="width: 200px;">
				<select id="administrator" name="administrator">
					<option value="">请选择</option>
					<option value="0">否</option>
					<option value="1">是</option>
				</select>
			</div>
			<div class="layui-input-inline" style="width: 300px;">
				<button class="layui-btn" lay-submit="" lay-filter="search" id="search" data-type="reload"><i class="layui-icon">&#xe615;</i>搜索</button>
				<button class="layui-btn layui-btn-normal" type="reset" ><i class="layui-icon">&#xe666;</i>重置</button>
			</div>
		</form>
	</div>

		<!--定义数据表格table  -->
		<table class="layui-hide" id="proTable" lay-filter="filterTable"></table>
		
		<!-- 开关1（既能开也能关） -->
		<script type="text/html" id="switchBar1">
    		<input type="checkbox" data-userid="{{d.userid}}" name="status" lay-filter="isLockSwitch" lay-skin="switch" lay-text="已锁定|未锁定" {{d.isLock=="1" ? "checked":""}}>
		</script>
		<!-- 开关2（既能开也能关） -->
		<script type="text/html" id="switchBar2">
    		<input type="checkbox" data-userid="{{d.userid}}" name="status" lay-filter="administratorSwitch" lay-skin="switch" lay-text="是|不是" {{d.administrator=="1" ? "checked":""}}>
		</script>
		
		

		<script>
			layui.use(['laydate','layer','form','table','tree'], function() {
				var laydate = layui.laydate	//日期组件
					,layer = layui.layer	//弹层组件
					,form = layui.form		//表单组件
					,tree = layui.tree		//树形结构组件
					,$= layui.jquery    	//jQuery
					,table = layui.table;	//表格组件
					
				//渲染表格，填充数据
			 	table.render({
					elem: '#proTable',			//对应上面定义的表格ID
					url: 'findUser.do',					//提交到后台的地址
					method: 'get',				//提交方式 get或者post
					even: true, 				//表格隔行变色
					page: true,					//开启分页
					toolbar: '#toolbarDemo', 	//开启头部工具栏，并为其绑定左侧模板
					title: '产品表', 				//表格名称
					cols: [
						[{
							field: 'ck',
							fixed: 'left',
							type: 'checkbox',
							width: 100
						},{
							field: 'userid',	//对应实体类里的属性    （必需有）
							fixed: 'left',	//固定方式，left左固定，right右固定 （可选）
							align:'center', //排列方式：left左对齐，center居中，right右对齐（可选）
							width: 80,		//单元格宽度（可选）	
							title: '编号',	//表头名称			（必需有）
							sort: true		//开启排序（可选）
						}, {
							field: 'username',	//对应实体类里的属性
							width: 120,		//单元格宽度	
							fixed: 'left',
							title: '用户姓名'		//表头名称
						}, {
							field: 'birthday',
							width: 120,
							title: '生日'
						}, {
							field: 'sex',
							width: 80,
							title: '性别'
						}, {
							field: 'password',
							width: 180,
							title: '密码'
						}, {
							field: 'userdate',
							width: 180,
							title: '最后登录时间'
						}, {
							field: 'phone',
							width: 180,
							title: '手机号'
						}, {
							field: 'accountbmikece',
							width: 180,
							title: '账号余额'
						},{
							field: 'isLock',
							fixed: 'right',
							title: '是否锁定',
							width: 120,
							toolbar:'#switchBar1'
						},{
							field: 'administrator',
							fixed: 'right',
							title: '是否管理员',
							width: 110,
							toolbar:'#switchBar2'
						}]
					]
				});
					
			  // 处理开关点击时把信息传入到后台进行修改（isLockSwitch写对应开关的lay-filter值即可）
		      form.on('switch(isLockSwitch)', function (data) {
		          var userid = $(this).attr('data-userid');			//获得当前点击对象的id值
		          var isLock = this.checked ? 'on' : 'off';	//获取到点击后的开关状态（on/off）
		          var x=data.elem.checked;					//获取到点击后的开关状态（true/false）
		          layer.open({
		              content: '确定要修改状态吗？'				//给用户的友好提示
		              ,btn: ['确定', '取消']
		              ,yes: function(index, layero){
		                  data.elem.checked=x;
		                  layer.close(index);
		                  $.ajax({
		                      type : "POST",
		                      url : "upUser.do",
		                      data : {"userid" : userid , "lock" : isLock},
		                      success : function(res) {
		                          if(res){
		                              layer.msg("修改成功！");
		                          }else{
		                              layer.msg("修改失败！");
		                          }
		                          form.render();
		                      },
		                      error : function() {
		                      }
		                  });
		              }
		              ,btn2: function(index, layero){
		                  //按钮【按钮二】的回调
		                  data.elem.checked=!x;
		                  form.render();
		                  layer.close(index);
		                  //return false 开启该代码可禁止点击该按钮关闭
		              }
		              ,cancel: function(){
		                  //右上角关闭回调
		                  data.elem.checked=!x;
		                  form.render();
		                  //return false 开启该代码可禁止点击该按钮关闭
		              }
		          });
		          form.render();
		          return false;
		      });
		      form.on('switch(administratorSwitch)', function (data) {
		          var userid = $(this).attr('data-userid');			//获得当前点击对象的id值
		          var administrator = this.checked ? 'on' : 'off';	//获取到点击后的开关状态（on/off）
		          var x=data.elem.checked;					//获取到点击后的开关状态（true/false）
		          layer.open({
		              content: '确定要修改状态吗？'				//给用户的友好提示
		              ,btn: ['确定', '取消']
		              ,yes: function(index, layero){
		                  data.elem.checked=x;
		                  layer.close(index);
		                  $.ajax({
		                      type : "POST",
		                      url : "upUser.do",
		                      data : {"userid" : userid , "admin" : administrator},
		                      success : function(res) {
		                          if(res){
		                              layer.msg("修改成功！");
		                          }else{
		                              layer.msg("修改失败！");
		                          }
		                          form.render();
		                      },
		                      error : function() {
		                      }
		                  });
		              }
		              ,btn2: function(index, layero){
		                  //按钮【按钮二】的回调
		                  data.elem.checked=!x;
		                  form.render();
		                  layer.close(index);
		                  //return false 开启该代码可禁止点击该按钮关闭
		              }
		              ,cancel: function(){
		                  //右上角关闭回调
		                  data.elem.checked=!x;
		                  form.render();
		                  //return false 开启该代码可禁止点击该按钮关闭
		              }
		          });
		          form.render();
		          return false;
		      });
				/*
					条件查询	submit 对应 lay-submit  search 对应 lay-filter
				*/
			    form.on('submit(search)', function (data) {
	                var field = data.field;		//获取所有的输入条件值
	                //执行重载
	                table.reload('proTable', {
	                    page: { curr: 1 }, 		// 重载后回到第一页
	                    where: field			// 把所有的输入值传给后台
	                });
	            }); 
				
				
			});
			
			
		</script>
	</body>
</html>
